<template>
  <div>
    <el-row class="tac">
      <el-col :span="4">
        <el-card class="province">
          <el-input
            v-model="name"
            @input="onInput"
            placeholder="请输入关键字解索"
          ></el-input>
          <el-menu class="el-menu-vertical-demo" :default-active="defaultActive">
            <template v-for="i in provinceData">
              <el-menu-item
                :index="i.code"
                :key="i.code"
                @click="getInfoByCode(i.code, i.level)"
              >
                <span slot="title">{{ i.name }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-card>
      </el-col>
      <el-col :span="20">
        <el-card class="detailsInfo">
          <div class="search_head">
            <div class="input">
              <el-input
                v-model="newName"
                @input="_search"
                placeholder="请输入关键字解索"
              ></el-input>
            </div>
            <div class="radio">
              <el-radio v-model="selectType" label="1">全国解索</el-radio>
              <el-radio v-model="selectType" label="2">当前省份解索</el-radio>
            </div>
          </div>
          <template>
            <el-table
              v-if="newName == ''"
              :data="infoByCodeData"
              style="width: 100%"
              row-key="code"
              lazy
              :load="load"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <el-table-column prop="name" label="行政区划"> </el-table-column>
              <el-table-column prop="code" label="行政区划代码"> </el-table-column>
              <el-table-column prop="nameFull" label="行政区划-全称"> </el-table-column>
              <el-table-column prop="provinceName" label="行政区划-省">
                <template slot-scope="scope">
                  {{ scope.row.provinceName || "-" }}
                </template>
              </el-table-column>
              <el-table-column prop="cityName" label="行政区划-市">
                <template slot-scope="scope">
                  {{ scope.row.cityName || "-" }}
                </template>
              </el-table-column>
              <el-table-column prop="districtName" label="行政区划-区/县">
                <template slot-scope="scope">
                  {{ scope.row.districtName || "-" }}
                </template>
              </el-table-column>
              <el-table-column prop="streetName" label="行政区划-乡镇/街道">
                <template slot-scope="scope">
                  {{ scope.row.streetName || "-" }}
                </template>
              </el-table-column>
            </el-table>
            <el-table v-else :data="infoByCodeData" style="width: 100%">
              <el-table-column prop="name" label="行政区划"> </el-table-column>
              <el-table-column prop="code" label="行政区划代码"> </el-table-column>
              <el-table-column prop="nameFull" label="行政区划-全称"> </el-table-column>
              <el-table-column prop="provinceName" label="行政区划-省">
                <template slot-scope="scope">
                  {{ scope.row.provinceName || "-" }}
                </template>
              </el-table-column>
              <el-table-column prop="cityName" label="行政区划-市">
                <template slot-scope="scope">
                  {{ scope.row.cityName || "-" }}
                </template>
              </el-table-column>
              <el-table-column prop="districtName" label="行政区划-区/县">
                <template slot-scope="scope">
                  {{ scope.row.districtName || "-" }}
                </template>
              </el-table-column>
              <el-table-column prop="streetName" label="行政区划-乡镇/街道">
                <template slot-scope="scope">
                  {{ scope.row.streetName || "-" }}
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getInfoByLevel, getInfoByCode, getInfoByName } from "@/services/esTest";

export default {
  name: "EsTest",
  data() {
    return {
      name: "",
      newName: "",
      level: 0,
      provinceData: [],
      infoByCodeData: [],
      total: 0,
      from: 0,
      size: 500,
      hasChildren: true,
      defaultActive: "",
      checkData: {
        code: "",
        level: "",
      },
      selectType: "1",
    };
  },
  mounted() {
    this.getProvinceData();
  },
  computed: {
    address() {
      return sessionStorage.getItem("address");
    },
  },
  methods: {
    getProvinceData() {
      this.level = 1;
      getInfoByLevel(this.name, this.level)
        .then((res) => {
          let newData = res.data;
          let movedItems = [];
          // 遍历newData，寻找name存在于this.address中的对象
          newData.forEach((item) => {
            if (this.address.includes(item.name)) {
              // 找到后先从newData中移除
              let index = newData.indexOf(item);
              if (index !== -1) {
                newData.splice(index, 1);
                // 添加到movedItems中
                movedItems.push(item);
              }
            }
          });
          // 将找到的对象添加到newData的开头
          if (movedItems.length > 0) {
            let item = movedItems[0];
            //默认展开
            this.defaultActive = item.code;
            this.checkData.code = item.code;
            this.checkData.level = item.level;
            //获取子数据
            this.getInfoByCode(item.code, item.level);
          }
          console.log(movedItems);
          newData.unshift(...movedItems);
          this.provinceData = newData;
        })
        .catch((err) => {});
    },
    onInput() {
      this.getProvinceData();
    },
    getInfoByCode(code, level) {
      this.checkData.code = code;
      this.checkData.level = level;
      getInfoByCode(code, level, this.from, this.size)
        .then((res) => {
          this.infoByCodeData = res.data.result;
          this.infoByCodeData.forEach((i) => {
            if (i.level != 5) {
              i.hasChildren = true;
            }
          });
          this.total = res.data.total;
        })
        .catch((err) => {});
    },
    load(tree, treeNode, resolve) {
      let childrens = [];
      getInfoByCode(tree.code, tree.level, this.from, this.size)
        .then((res) => {
          childrens = res.data.result;
          childrens.forEach((i) => {
            if (i.level != 5) {
              i.hasChildren = true;
            }
          });
          resolve(childrens);
        })
        .catch((err) => {});
    },
    _search() {
      if (this.newName != "") {
        getInfoByName(
          this.selectType == "2" ? this.checkData.code : null,
          this.newName,
          this.from,
          this.size
        )
          .then((res) => {
            this.infoByCodeData = res.data.result;
          })
          .catch((err) => {});
      } else {
        this.getInfoByCode(this.checkData.code, this.checkData.level);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.province {
  height: 87vh;
  width: 100%;
  overflow: auto;
}
.detailsInfo {
  height: 87vh;
  width: 100%;
  overflow: auto;
}
.search_head {
  display: flex;
  .input {
    display: flex;
    width: 70%;
  }
  .radio {
    display: flex;
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中，确保单选框及其文本居中 */
    width: 30%;
  }
}
</style>
